<template>
  <div class="home" ref="page" v-scroll @scroll="scrollHandler">
    <van-pull-refresh v-model="refreshing" @refresh="page = 1">
      <div class="home-top">
        <br />
        <!-- 搜索 -->
        <van-search
          show-action
          label="JD"
          placeholder="请输入搜索关键词"
          :disabled="true"
          shape="round"
        >
          <template #left>
            <img :src="$img.iMenu" @click="$router.push('cate')" />
          </template>
          <template v-if="!this.logflag" #action>
            <div @click="$router.replace('/login')">登录</div>
          </template>
          <template v-else #action>
            <div>已登录</div>
          </template>
        </van-search>

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
          <van-swipe-item v-for="img in images" :key="img.id">
            <img :src="img.src" />
          </van-swipe-item>
        </van-swipe>

        <div class="floor">
          <img src="@/assets/floorleft.png" />
          <img src="@/assets/floor.gif" />
          <img src="@/assets/floorright.png" />
        </div>
      </div>

      <!-- 首页分类栏 -->
      <van-swipe class="mall-cate" indicator-color="red" :loop="false">
        <van-swipe-item v-for="i in 2" :key="i">
          <van-grid :column-num="5">
            <van-grid-item
              v-for="value in 10"
              :key="value"
              icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"
              text="京东超市"
            />
          </van-grid>
        </van-swipe-item>
      </van-swipe>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="page++"
        :immediate-check="false"
      >
        <div class="goodlist">
          <div class="goodlist-row" v-for="i in row" :key="i">
            <div
              v-for="j in 2"
              :key="j"
              @click="$router.push('/product/' + item(i, j)._id)"
            >
              <img :src="$img.imgBase + item(i, j).img" alt="" />
              <span v-text="item(i, j).desc"></span>
              <p>
                <span>￥{{ item(i, j).price }}</span>
              </p>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <br />

    <TabBar />
  </div>
</template>

<script>
import { TabBar } from "@/components";
// import { mapState } from "vuex";
export default {
  data() {
    return {
      images: [
        {
          id: 1,
          src: "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/158391/26/24529/59897/61765c78E52387d84/66d3ea70542a5b8c.jpg!cr_1053x420_4_0!q70.jpg.dpg",
        },
        {
          id: 2,
          src: "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/128114/1/10242/85464/5f3e706aE5173228e/350c585815b743cf.jpg!cr_1125x449_0_166!q70.jpg.dpg",
        },
        {
          id: 3,
          src: "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/180940/32/17239/105988/61079aa1Ef30224f6/dd133bbb8cb5db3b.jpg!cr_1053x420_4_0!q70.jpg.dpg",
        },
        {
          id: 4,
          src: "//imgcps.jd.com/ling4/10035632057576/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5c131e9282acdd181da661aa/0e0bdb37/cr_1125x449_0_166/s/q70.jpg",
        },
        {
          id: 5,
          src: "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/216561/6/2107/172740/61799fefE370b9bfb/060f8ac4660a370c.png!cr_1053x420_4_0!q70.jpg.dpg",
        },
      ],
      loading: false,
      finished: false,
      refreshing: false,
      n: 5,
      goodslist: [],
      page: 1,
      logflag: false,
      scrollTop: 0, //记录滚动条位置
    };
  },
  created() {
    const res = localStorage.getItem("token");
    if (res) {
      this.logflag = true;
    }
    this.getList();
  },
  computed: {
    row() {
      return Math.floor(this.goodslist.length / 2);
    },
  },
  watch: {
    loading() {
      if (this.loading) this.getList();
    },
    refreshing() {
      if (this.refreshing) this.getList();
    },
  },
  activated() {
    this.$refs.page.scrollTop = this.scrollTop;
  },
  methods: {
    // 滚动后顶部栏变红色
    scrollHandler(e) {
      let search = document.querySelector(".van-search");
      this.scrollTop = e.srcElement.scrollTop;
      if (this.scrollTop >= 5) {
        search.style.background = "#E43130";
      } else {
        search.style.background = "transparent";
      }
    },
    getList() {
      const params = { size: 6, page: this.page };
      this.$api.fetchGoodList(params).then((res) => {
        if (this.page == 1) {
          this.goodslist = res.list;
          this.refreshing = false;
          this.finished = false;
        } else {
          // 把分页数据合并到this.goodslist
          this.goodslist = [...this.goodslist, ...res.list];
          this.loading = false;
          // 判断是否到底了，判断数据库还有没有数据
          if (this.goodslist.length === res.total) {
            this.finished = true;
          }
        }
        // 加载完成，保证下一次触底功能也是正常
        this.loading = false;
      });
    },
    onLoad() {
      setTimeout(() => {
        this.n += 5;
        this.loading = false;
        if (this.n >= 20) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false;
        this.n = 5;
        this.finished = false;
      }, 500);
    },
    item(i, j) {
      return this.goodslist[2 * i - 3 + j];
    },
  },
  components: {
    TabBar,
  },
};
</script>


<style lang="scss" scoped>
.text {
  font-size: 0.5rem;
}
.home {
  .my-swipe {
    margin-top: 0.2rem;
    img {
      display: block;
      margin: 0 auto;
      width: 9.333333rem;
      height: 3.733333rem;
      border-radius: 5px;
    }
  }
}

.van-search__label {
  color: red;
  font-size: 0.5rem;
  font-weight: 510;
}

.van-search img {
  display: block;
  width: 0.666667rem;
  height: 0.666667rem;
}

.mall-cate {
  width: 10rem;
  height: 4.32rem;
  background-color: #f6f6f6;
}
.goodlist {
  background-color: #f7f7f7;
  .goodlist-row {
    display: flex;
    & > div {
      flex: 1;
      background-color: #ffffff;
      width: 4.72rem;
      height: 6.306667rem;
      margin: 10px;
      justify-content: space-between;
      font-size: 0.346667rem;
      overflow: hidden;
      border-radius: 0.2rem;

      img {
        display: block;
        width: 4.613333rem;
        height: 4.613333rem;
      }

      span {
        display: inline-block;
        width: 4.52rem;
        height: 0.866667rem;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      p {
        width: 100%;
        height: 0.4rem;
        margin: 0;
        color: #fa2c19;
        font-size: 0.426667rem;
        font-weight: 600;
      }
    }
  }
}
.floor {
  width: 10rem;
  height: 3.066667rem;
}
.floor img:nth-of-type(1) {
  width: 2.4rem;
  height: 3.066667rem;
}
.floor img:nth-of-type(2) {
  width: 5.2rem;
  height: 3.066667rem;
}
.floor img:nth-of-type(3) {
  width: 2.4rem;
  height: 3.066667rem;
}
.van-search {
  position: fixed;
  z-index: 1;
  width: 100%;
  top: 0;
  height: 1.333333rem;
}

.van-search {
  background: transparent;
}
</style>

<style lang="scss">
.van-grid-item {
  width: 2rem;
  height: 1.946667rem;
}
.van-grid-item__content {
  background-color: #f6f6f6;
}

.home-top {
  background: url("../../assets/bg.png") no-repeat;
  background-size: 10rem;
}
</style>
